<!--
  信息确认 入住人信息
  v-model: [
    {
    trueName: 姓名
    sex: 性别 '1'男 '0'女
    idCard: 身份证号码
    mobile: 手机号码
    }
  ]
-->
<template lang="html">
  <div class="userInfo-wrap">
    <group>
      <x-input
      :show-clear="false"
       title="姓名"
       v-model="userInfo.trueName"
       :disabled="disabled"
       text-align="right"
       placeholder="请输入姓名"></x-input>

      <selector
       title="性别"
       v-model="userInfo.sex"
       :options="sexs"
       direction="rtl"
       placeholder="请选择性别"
       :readonly="disabled"></selector>

      <x-input
      :show-clear="false"
       title="身份证号码"
       :disabled="disabled"
       v-model="userInfo.idCard"
       placeholder="请输入身份证号码"
       text-align="right"></x-input>

      <x-input
      :show-clear="false"
       title="手机号码"
       :disabled="disabled"
       v-model="userInfo.mobile"
       placeholder="请输入手机号码"
       text-align="right"
       :type="disabled ? 'text' : 'tel'"></x-input>

    </group>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: {}
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      sexs: [
        {
          key: '1',
          value: '男'
        },
        {
          key: '0',
          value: '女'
        }
      ],
      userInfo: {
        trueName: '',
        sex: '',
        idCard: '',
        mobile: ''
      }
    }
  },
  watch: {
    userInfo: {
      handler (newVal, oldVal) {
        if (!this.disabled) {
          this.$emit('input', newVal)
        }
      },
      deep: true
    }
  },
  created () {
    this.userInfo = Object.assign({
      trueName: '',
      sex: '',
      idCard: '',
      mobile: ''
    }, this.user)
  }
}
</script>

<style lang="less">
  .userInfo-wrap{
    .vux-no-group-title{
      margin-top: 0;
    }
    .weui-cells{
      &:before, &:after{
        display: none;
      }
    }
    .weui-cell{
      padding: 0 15px;
      font-size: 14px;
      height: 47px;
      box-sizing: border-box;
      .weui-cell__hd, .weui-cell__bd{
        display: flex;
        height: 100%;
        align-items: center;
        &:after{
          display: none;
        }
      }
      .weui-cell__ft{
        color: #585858;
      }
    }

    .weui-label{
      font-size: 14px;
      color: #585858;
    }

    .weui-input{
      font-size: 14px;
      color: #585858;
    }

    .weui-select{
      font-size: 14px;
      color: #585858;
      padding-right: 0;
    }

    .weui-input:disabled{
      -webkit-text-fill-color: #585858;
      -webkit-opacity: 1;
      color: #585858;
    }

  }
</style>
